<template>
	<view class="settlement-container">
		<view class="wrapper">	
			<my-address></my-address>
			<view class="goods-list">
				<my-order-goods v-for="goods in checkedGoods" :key="goods.goodsId" :goods="goods" v-if="cartPay"></my-order-goods>
				<my-order-goods :goods="nowPayGoods" v-if="nowPay"></my-order-goods>
			</view>
			<view class="price-detail">
				<view class="title">
					价格明细
				</view>
				<view class="goods-price content">
					<view class="label">
						商品金额
					</view>
					<view class="value">
						<view class="count" v-if="cartPay">
							共<text>{{ checkedCount }}</text>件
						</view>
						<view class="count" v-else>
							共<text>{{ nowPayGoods.goodsCount }}</text>件
						</view>
						<view class="price" v-if="cartPay">
							￥{{checkedGoodsAmount}}
						</view>
						<view class="price" v-else>
							￥{{nowPayGoods.goodsPrice}}
						</view>
					</view>
				</view>
				<view class="total-price content">
					<view class="label">
						合计
					</view>
					<view class="value" v-if="cartPay">
						￥{{ checkedGoodsAmount }}
					</view>
					<view class="value" v-else>
						￥{{ nowPayGoods.goodsPrice * nowPayGoods.goodsCount }}
					</view>
				</view>
			</view>
		</view>
		<view class="pay-box">
			<view class="pay-left">
				<view class="label" v-if="cartPay">
					<text>共{{ checkedCount }}件</text> 合计:
				</view>
				<view class="label" v-else>
					<text>共{{ nowPayGoods.goodsCount }}件</text> 合计:
				</view>
				<view class="pay-price" v-if="cartPay">
					￥{{ checkedGoodsAmount }}
				</view>
				<view class="pay-price" v-else>
					￥{{ nowPayGoods.goodsPrice * nowPayGoods.goodsCount }}
				</view>
			</view>
			<view class="pay-right">
				<view class="pay-btn" @click="createOrder">
					立即支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapState(['nowPay', 'cartPay', 'nowPayGoods']),
			...mapGetters('module_cart', ['checkedCount', 'checkedGoodsAmount', 'checkedGoods']),
			...mapGetters('module_user', ['addstr', 'defaultAddress']),
			...mapState('module_user', ['userinfo', 'token'])
		},
		methods: {
			async createOrder() {
				console.log(this.nowPayGoods);
				console.log(this.cartPay);
				if(!this.token) return uni.$showMsg('请先登录')
				if(this.defaultAddress === undefined) return uni.$showMsg('请选择收货地址')
				if(this.cartPay) {
					const orderGoods = JSON.parse(JSON.stringify(this.checkedGoods))
					orderGoods.forEach(item => {
						item.buyerName = this.defaultAddress.buyerName
						item.phone = this.defaultAddress.phone
						item.buyerAddr = this.defaultAddress.buyerAddr
						delete item.createTime
					})
					console.log(this.checkedGoods);
					const orderList = JSON.parse(JSON.stringify(orderGoods))
					console.log(orderList);
					const { data: res } = await uni.$http.post('/user/orders', orderList)
					console.log(res);
					if(res.code !== 200) return uni.$showMsg('创建订单失败')
					uni.showToast({
						title: '创建订单成功',
						icon: 'success'
					})
					const payInfo = {
						"timeStamp": "1687440530",
						"nonceStr": "BkPggorBXZwPGXe3",
						"package": "prepay_id=wx071619042918087bb4c1d3d72999385683",
						"signType": "MD5",
						"paySign": "D1642DEEF1663C8012EDEB9297E1D516"
					}
					const [err, succ] = await uni.requestPayment(payInfo)
					if(err) return uni.$showMsg('订单未支付')
					uni.showToast({
						title: '订单支付完成',
						icon: 'success'
					})
				}else {
					const goods = JSON.parse(JSON.stringify(this.nowPayGoods))
					goods.userId = this.userinfo.id
					goods.buyerName = this.defaultAddress.buyerName
					goods.phone = this.defaultAddress.phone
					goods.buyerAddr = this.defaultAddress.buyerAddr
					const orderList = [goods]
					const { data: res } = await uni.$http.post('/user/orders', orderList)
					console.log(res);
					if(res.code !== 200) return uni.$showMsg('创建订单失败')
					uni.showToast({
						title: '创建订单成功',
						icon: 'success'
					})
					const payInfo = {
						"timeStamp": "1687440530",
						"nonceStr": "BkPggorBXZwPGXe3",
						"package": "prepay_id=wx071619042918087bb4c1d3d72999385683",
						"signType": "MD5",
						"paySign": "D1642DEEF1663C8012EDEB9297E1D516"
					}
					const [err, succ] = await uni.requestPayment(payInfo)
					if(err) return uni.$showMsg('订单未支付')
					uni.showToast({
						title: '订单支付完成',
						icon: 'success'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.settlement-container {
	// padding: 20rpx;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.wrapper {
	padding: 20rpx;
	width: 100%;
	box-sizing: border-box;
}
.price-detail {
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 120rpx;
	.title {
		font-size: 16px;
		font-weight: bold;
	}
	.content {
		display: flex;
		margin: 30rpx 0;
		font-size: 14px;
		justify-content: space-between;
		.value {
			display: flex;
			.count {
				color: #999;
				margin-right: 10rpx;
			}
		}
	}
	.total-price {
		align-items: center;
		.value {
			font-size: 18px;
			font-weight: bold;
		}
	}
}
.pay-box {
	display: flex;
	padding: 20rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	justify-content: space-between;
	.pay-left {
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
		.label {
			text {
				margin-right: 16rpx;
				position: relative;
				display: inline-block;
				letter-spacing: 4rpx;
			}
			text::after{
				content: "";
				width: 1px;
				height: 15px;
				right: -5px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background-color: #000;
			}
		}
		.pay-price {
			color: #CD0000;
			font-size: 16px;
			font-weight: bold;
		}
	}
	.pay-right {
		width: 24%;
		color: #fff;
		text-align: center;
		line-height: 40px;
		background-color: #52e3fc;
		border-radius: 4rpx;
	}
}
</style>
